<template>
  <div>
    <el-card shadow="never">
      <header-title title="摊位管理"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <div>
            <el-input
              v-model="searchForm.searchName"
              placeholder="可输入商户名称/摊位编号/联系方式"
              size="small"
              style="margin-left: 15px;width: 260px;"
            ></el-input>
            <el-select
              v-model="searchForm.partition"
              placeholder="请选择区域"
              size="small"
              style="width: 120px;"
            >
              <el-option
                v-for="item in partitions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="searchForm.status"
              placeholder="请选择状态"
              size="small"
              style="width: 120px;"
            >
              <el-option :key="0" label="全部" :value="0"></el-option>
              <el-option :key="1" label="闲置" :value="1"></el-option>
              <el-option :key="2" label="出租中" :value="2"></el-option>
            </el-select>
            <el-select v-model="searchForm.stallBusinessType" placeholder="请选择主营类型" size="small">
              <el-option
                v-for="item in topProductTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button @click="showNewStallDialog" class="button" size="small" round>增加摊位</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="stallData" v-loading="loading" style="width: 100%">
          <el-table-column prop="partitionName" label="区域"></el-table-column>
          <el-table-column prop="stallName" label="摊位编号"></el-table-column>
          <el-table-column prop="stallBusinessTypeName" label="摊位类型名称"></el-table-column>
          <el-table-column prop="areas" label="面积"></el-table-column>
          <el-table-column prop="stallBusinessName" label="商户名称"></el-table-column>
          <!-- <el-table-column prop="stallMoney" label="摊位租金"></el-table-column> -->
          <el-table-column prop="statusStr" label="摊位状态"></el-table-column>
          <!-- <el-table-column prop="status" label="摊位状态Code"></el-table-column> -->
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <div v-show="scope.row.status != 2">
                <el-button
                  @click="showEditStallDialog(scope.row)"
                  type="text"
                  style="color:#3dc2c2;"
                >编辑</el-button>
                <el-button @click="remove(scope.row.stallId)" type="text" style="color:#f7674a;">删除</el-button>
              </div>
              <div v-show="scope.row.status == 2">
                <el-button disabled type="text">编辑</el-button>
                <el-button disabled type="text">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="../../assets/blank_tip_page/blank_tip_page.png" alt />
          </div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeStallPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      width="360px"
      title="添加摊位"
      :visible.sync="newStallForm.show"
      @close="close"
      v-if="newStallForm.show"
    >
      <div>
        <el-form :model="newStallForm.modal" label-width="80px" :rules="rules" ref="newStallform">
          <el-form-item label="主营" prop="stallBusinessType" key="stallBusinessType">
            <el-select
              v-model="newStallForm.modal.stallBusinessType"
              placeholder="请选择主营类型"
              size="small"
            >
              <el-option
                v-for="item in topProductTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域" prop="partitionId">
            <el-select
              v-model="newStallForm.modal.partitionId"
              placeholder="请选择区域"
              size="small"
              key="partitionId"
            >
              <el-option
                v-for="item in newStallForm.partitions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="type" label="自动">
            <el-switch active-value="2" inactive-value="1" v-model="newStallForm.modal.type"></el-switch>
          </el-form-item>
          <el-form-item
            v-if="newStallForm.modal.type!=2"
            label="名称"
            prop="stallName"
            key="stallName"
          >
            <el-input style="width:190px" v-model="newStallForm.modal.stallName"></el-input>
          </el-form-item>
          <el-form-item v-if="newStallForm.modal.type!=2" label="面积" prop="areas" key="areas">
            <el-input style="width:190px" v-model="newStallForm.modal.areas"></el-input>
          </el-form-item>
          <el-form-item v-if="newStallForm.modal.type==2" label="前缀" prop="prefix" key="prefix">
            <el-input style="width:190px" size="small" v-model="newStallForm.modal.prefix"></el-input>
          </el-form-item>
          <el-form-item v-if="newStallForm.modal.type==2" label="开始序号" prop="begin" key="begin">
            <el-input-number
              style="width:190px"
              controls-position="right"
              size="small"
              :min="1"
              v-model="newStallForm.modal.begin"
            ></el-input-number>
          </el-form-item>
          <el-form-item v-if="newStallForm.modal.type==2" label="数量" prop="length" key="length">
            <el-input-number
              style="width:190px"
              controls-position="right"
              size="small"
              :min="1"
              v-model="newStallForm.modal.length"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('newStallform')">添加摊位</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="360px"
      title="编辑摊位"
      :visible.sync="editStallForm.show"
      @close="close"
      v-if="editStallForm.show"
    >
      <div>
        <el-form :model="editStallForm.modal" label-width="68px" :rules="editrules" ref="editform">
          <el-form-item label="主营" prop="stallBusinessType">
            <el-select
              v-model="editStallForm.modal.stallBusinessType"
              placeholder="请选择主营类型"
              size="small"
            >
              <el-option
                v-for="item in topProductTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区域" prop="partitionId">
            <el-select v-model="editStallForm.modal.partitionId" placeholder="请选择区域" size="small">
              <el-option
                v-for="item in newStallForm.partitions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="stallName">
            <el-input style="width:190px" v-model="editStallForm.modal.stallName"></el-input>
          </el-form-item>
          <el-form-item label="面积" prop="areas">
            <el-input style="width:190px" v-model="editStallForm.modal.areas"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit('editform')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle";
import { mapState } from "vuex";
export default {
  name: "Stall",
  components: {
    HeaderTitle
  },
  data() {
    return {
      loading: true,
      searchForm: {
        searchName: "",
        partition: "",
        status: 0,
        stallBusinessType: ""
      },
      topProductTypeData: [],
      newStallForm: {
        partitions: [],
        show: false,
        modal: {
          partitionId: "",
          type: 1,
          stallBusinessType: ""
        }
      },

      editStallForm: {
        show: false,
        modal: {
          partitionId: "",
          type: 1,
          stallBusinessType: "",
          stallBusinessTypeName: "",
          stallName: "",
          areas: ""
        }
      },

      partitions: [],
      stallData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,

      stallTypeData: [], // 摊位主营类型数组

      rules: {
        stallBusinessType: [
          { required: true, message: "请输入主营类型", trigger: "change" }
        ],
        partitionId: [
          { required: true, message: "请选择区域", trigger: "change" }
        ],
        stallName: [
          { required: true, message: "请输入名称", trigger: "change" }
        ],
        areas: [
          { required: true, message: "请输入面积", trigger: "change" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "面积是整数或2位小数",
            trigger: "change"
          }
        ],
        prefix: [
          { required: true, message: "请输入前缀", trigger: "change" },
          {
            pattern: /^[\u4e00-\u9fa5a-zA-Z\d\(\)（）\-\_]+$/,
            message: "只可以是数字,字母,中文,-,_,(),（）",
            trigger: "change"
          }
        ],
        begin: [
          { required: true, message: "请输入开始序号", trigger: "change" },
          {
            pattern: /(^[1-9]\d*$)/,
            message: "序号必须是整数",
            trigger: "change"
          }
        ],
        length: [
          { required: true, message: "请输入数量", trigger: "change" },
          {
            pattern: /(^[1-9]\d*$)/,
            message: "数量必须是整数",
            trigger: "change"
          }
        ]
      },
      editrules: {
        stallBusinessType: [
          { required: true, message: "请输入主营类型", trigger: "change" }
        ],
        areas: [
          { required: true, message: "请选择面积", trigger: ["change"] },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "面积是整数或2位小数",
            trigger: "change"
          }
        ],
        partitionId: [
          { required: true, message: "请选择区域", trigger: "change" }
        ],
        stallName: [
          { required: true, message: "请输入名称", trigger: "change" }
        ]
      }
    };
  },
  computed: {
    ...mapState("app", ["marketId"])
  },
  mounted() {
    this.fetchStalls(
      this.searchForm.stallBusinessType,
      this.searchForm.searchName,
      this.searchForm.partition,
      this.searchForm.status,
      this.perPage,
      this.page
    );
    this.fetchPartitions();
    this.getBusinessType();
  },
  watch: {
    "$store.state.app.marketId"(val, oldVal) {
      this.fetchStalls(
        this.searchForm.stallBusinessType,
        this.searchForm.searchName,
        this.searchForm.partition,
        this.searchForm.status,
        this.perPage,
        this.page
      );
      this.fetchPartitions();
      this.getBusinessType();
    }
  },
  methods: {
    // 获取商户主营类型
    getBusinessType() {
      this.$store
        .dispatch("equipment/fetchBusinessType")
        .then(data => {
          this.topProductTypeData = data;
        })
        .catch(err => {
          this.topProductTypeData = [];
        });
    },
    // 获取摊位管理列表
    fetchStalls(
      stallBusinessType,
      searchName,
      partitionName,
      status,
      perPage,
      page
    ) {
      this.$store
        .dispatch("stall/fetchStalls", {
          stallBusinessType,
          searchName,
          partitionName,
          status,
          perPage,
          page
        })
        .then(data => {
          this.loading = false;
          this.stallData = data.items;
          this.total = data.total;
        })
        .catch(err => {
          this.loading = false;
          this.stallData = [];
          this.total = 0;
        });
    },
    search() {
      this.page = 1;
      this.fetchStalls(
        this.searchForm.stallBusinessType,
        this.searchForm.searchName,
        this.searchForm.partition,
        this.searchForm.status,
        this.perPage,
        this.page
      );
    },
    changeStallPage(num) {
      this.page = num;
      this.fetchStalls(
        this.searchForm.stallBusinessType,
        this.searchForm.searchName,
        this.searchForm.partition,
        this.searchForm.status,
        this.perPage,
        this.page
      );
    },
    // 获取摊位主营类型
    fetchPartitions() {
      this.$store
        .dispatch("stall/fetchPartitions")
        .then(data => {
          this.partitions = data.slice();
          this.newStallForm.partitions = data.slice();
          this.partitions.unshift({ id: -1, name: "全部" });
        })
        .catch(err => {
          this.stallTypeData = [];
        });
    },
    // 点击增加摊位
    showNewStallDialog() {
      this.newStallForm.modal = {};
      this.newStallForm.show = true;
    },

    showEditStallDialog(row) {
      this.editStallForm.modal.stallBusinessTypeName =
        row.stallBusinessTypeName;
      for (const bt of this.topProductTypeData) {
        if (bt.name == row.stallBusinessTypeName) {
          this.editStallForm.modal.stallBusinessType = bt.id;
        }
      }

      (this.editStallForm.modal.id = row.stallId),
        (this.editStallForm.modal.partitionName = row.partitionName);

      for (const partition of this.newStallForm.partitions) {
        if (partition.name == row.partitionName) {
          this.editStallForm.modal.partitionId = partition.id;
        }
      }
      this.editStallForm.modal.stallName = row.stallName;
      this.editStallForm.modal.areas = row.areas;
      console.log("edit partition", this.editStallForm.modal);
      this.editStallForm.show = true;
    },
    close() {
      this.clear();
    },
    clear() {
      this.newStallForm.modal = {};
      this.editStallForm.modal = {
        partitionId: "",
        type: 1,
        stallBusinessType: "",
        stallBusinessTypeName: "",
        stallName: "",
        areas: ""
      };
    },
    // 提交增加摊位
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          for (let partition of this.newStallForm.partitions) {
            if (partition.id == this.newStallForm.modal.partitionId) {
              this.newStallForm.modal.partitionName = partition.name;
              break;
            }
          }

          this.$store
            .dispatch("stall/submit", this.newStallForm.modal)
            .then(data => {
              if (data.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功！"
                });
                this.fetchStalls(
                  this.searchForm.stallBusinessType,
                  this.searchForm.searchName,
                  this.searchForm.partition,
                  this.searchForm.status,
                  this.perPage,
                  this.page
                );
                this.newStallForm.show = false;
              } else {
                this.$message({
                  type: "error",
                  message: "添加失败！"
                });
              }
            });
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    saveEdit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          for (let partition of this.newStallForm.partitions) {
            if (partition.id == this.editStallForm.modal.partitionId) {
              this.editStallForm.modal.partitionName = partition.name;
              break;
            }
          }

          for (let bt of this.topProductTypeData) {
            if (bt.id == this.editStallForm.modal.stallBusinessType) {
              this.editStallForm.modal.stallBusinessTypeName = bt.name;
              break;
            }
          }

          this.$store
            .dispatch("stall/saveEdit", this.editStallForm.modal)
            .then(data => {
              if (data.code === 200) {
                this.$message({
                  type: "success",
                  message: "编辑成功！"
                });
                this.fetchStalls(
                  this.searchForm.stallBusinessType,
                  this.searchForm.searchName,
                  this.searchForm.partition,
                  this.searchForm.status,
                  this.perPage,
                  this.page
                );
                this.editStallForm.show = false;
              } else {
                this.$message({
                  type: "error",
                  message: "编辑失败"
                });
              }
            });
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    remove(id) {
      this.$store.dispatch("stall/remove", id).then(data => {
        if (data.code === 200) {
          this.$message({
            type: "success",
            message: "操作成功，请刷新！"
          });
          this.fetchStalls(
            this.searchForm.stallBusinessType,
            this.searchForm.searchName,
            this.searchForm.partition,
            this.searchForm.status,
            this.perPage,
            this.page
          );
        } else {
          this.$message({
            type: "error",
            message: "操作失败，请重新操作！"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table__empty-text {
  width: 100%;
}
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>

